<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
			label-width="68px">
			<div class="app-space-between">
				<div class="app-space-between-left">
					<el-form-item label="景区名称" prop="parkName">
						<el-input v-model="queryParams.parkName" placeholder="请输入景区名称" clearable @clear="handleQuery"
							@keyup.enter.native="handleQuery" />
					</el-form-item>
					<el-form-item label="门票日期" prop="proDate">
						<el-date-picker v-model="queryParams.proDate" @change="handleQuery" type="date" clearable
							placeholder="请选择门票日期" value-format="yyyy-MM-dd">
						</el-date-picker>
					</el-form-item>
					{{queryParams.date}}
					<el-form-item label="上下架" prop="onShowType">
						<el-select v-model="queryParams.onShowType" placeholder="请选择上下架" @change="handleQuery">
							<el-option label="全部" :value="undefined" />
							<el-option label="上架" :value="0" />
							<el-option label="下架" :value="1" />
						</el-select>
					</el-form-item>
				</div>
				<div class="app-space-between-right">
					<el-form-item>
						<el-button type="primary" size="mini" @click="handleQuery">搜索</el-button>
						<el-button size="mini" @click="resetQuery">重置</el-button>
					</el-form-item>
				</div>
			</div>
		</el-form>

		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button type="primary" plain size="mini" @click="handleAdd">新增</el-button>
				<el-button type="primary" plain size="mini" @click="handleSync">获取中塔门票</el-button>
			</el-col>
			
			
			
			<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
		</el-row>

		<el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange">
			<el-table-column label="景区名称" align="center" prop="parkName" min-width="180" />
			<el-table-column label="门票名称" align="center" prop="productName" min-width="180" />
			<el-table-column label="结算单价(元)" align="center" prop="settlementPrice" min-width="100" />
			<el-table-column label="销售单价(元)" align="center" prop="productPrice" min-width="100" />
			<el-table-column label="门票日期" align="center" prop="date" min-width="140" />
			<el-table-column label="剧场票" align="center" prop="productIsTheatre" min-width="120">
				<template slot-scope="scope">
					<div>{{scope.row.productIsTheatre == "1" ?"是":"否"}}</div>
				</template>
			</el-table-column>
			<el-table-column label="上架状态" align="center" prop="parkName" min-width="100">
				<template slot-scope="scope">
					<div>{{Number(scope.row.onShowType) == 0 ? "上架" : "下架"}}</div>
				</template>
			</el-table-column>
		</el-table>
		<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
			@pagination="getList" />
		<!-- 添加或修改岗位对话框 -->
		<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
			<el-form ref="form" :model="form" :rules="rules" label-width="110px">
				<el-form-item label="景区名称" prop="parkName">
					<el-input v-model="form.parkName" placeholder="请输入景区名称" />
				</el-form-item>
				<el-form-item label="门票名称" prop="productName">
					<el-input v-model="form.productName" placeholder="请输入门票名称" />
				</el-form-item>
				<el-form-item label="结算单价(元)" prop="settlementPrice">
					<el-input v-model="form.settlementPrice" placeholder="请输入结算单价" />
				</el-form-item>
				<el-form-item label="销售单价(元)" prop="productPrice">
					<el-input v-model="form.productPrice" placeholder="请输入销售单价" />
				</el-form-item>
				<el-form-item label="剧场票" prop="productIsTheatre">
					<el-radio v-model="form.productIsTheatre" label="1">是</el-radio>
					<el-radio v-model="form.productIsTheatre" label="2">否</el-radio>
				</el-form-item>
				<el-form-item label="库存" prop="productSurplusNum">
					<el-input v-model="form.productSurplusNum" placeholder="请输入库存" />
				</el-form-item>
				<el-form-item label="时间" prop="date">
					<el-date-picker v-model="form.date" type="date" placeholder="请选择时间">
					</el-date-picker>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm" :loading="submitLoading">{{form.parkId? '保 存':'确 定'}}
				</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		clotaProductList,
		clotaProductAdd,
		clotaProductEdit,
		clotaProductDetails,
		clotaProductDelete,
		clotaProductExport,
		ticProductGetNowProduct
	} from "@/api/scenicSpot/data.js";
	import {
		commonDownload
	} from "@/api/common.js"
	export default {
		name: "Post",
		dicts: ['sys_normal_disable'],
		data() {
			return {
				// 遮罩层
				loading: true,
				submitLoading: false,
				// 选中数组
				ids: [],
				// 非单个禁用
				single: true,
				// 非多个禁用
				multiple: true,
				// 显示搜索条件
				showSearch: true,
				// 总条数
				total: 0,
				// 岗位表格数据
				postList: [],
				// 弹出层标题
				title: "",
				// 是否显示弹出层
				open: false,
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					parkName: undefined,
					onShowType: undefined,
					proDate: undefined
				},
				// 表单参数
				form: {},
				// 表单校验
				rules: {
					productPrice:{
						required: true,
						message: "请输入结算单价",
						trigger: "blur"
					},
					settlementPrice: [{
						required: true,
						message: "请输入销售单价",
						trigger: "blur"
					}],
					productNum: [{
						required: true,
						message: "请输入门票总量",
						trigger: "blur"
					}],
					productIsTheatre: [{
						required: true,
						message: "请选择是否剧场票",
						trigger: "blur"
					}],
					productSurplusNum: [{
						required: true,
						message: "请输入库存",
						trigger: "blur"
					}],
					date: [{
						required: true,
						message: "请请选择时间",
						trigger: "blur"
					}],
					parkName: [{
						required: true,
						message: "请输入景区名称",
						trigger: "blur"
					}],
					productName: [{
						required: true,
						message: "请输入门票名称",
						trigger: "blur"
					}],
				}
			};
		},
		created() {
			this.getList();
		},
		methods: {
			/** 查询岗位列表 */
			getList() {
				this.loading = true;
				clotaProductList(this.queryParams).then(response => {
					this.postList = response.rows;
					this.total = response.total;
					this.loading = false;
				});
			},
			// 取消按钮
			cancel() {
				this.open = false;
				this.reset();
			},
			// 表单重置
			reset() {
				this.form = {
					parkName: undefined,
					productName: undefined,
					productPrice: undefined,
					productNum: undefined,
					productIsTheatre: undefined,
					productSurplusNum: undefined,
					date: undefined,
					settlementPrice: undefined
				};
				this.resetForm("form");
			},
			async handleSync(){
				try{
					this.loading = true;
					let res = await ticProductGetNowProduct();
					console.log('同步接返回',res)
					this.$message.success("同步成功，已同步未来一周的门票");
					this.getList();
				}catch(err){
					this.loading = false;
					conosle.log('同步失败，请联系管理员',err)
				}
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.resetForm("queryForm");
				this.handleQuery();
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				this.ids = selection.map(item => item.parkId)
				this.single = selection.length != 1
				this.multiple = !selection.length
			},
			/** 新增按钮操作 */
			handleAdd() {
				this.reset();
				this.open = true;
				this.submitLoading = false;
				this.title = "添加景区";
			},
			/** 修改按钮操作 */
			handleUpdate(row) {
				this.reset();
				this.submitLoading = false;
				const parkId = row.parkId || this.ids;
				clotaProductDetails(parkId).then(response => {
					response.data.status = `${response.data.status}`
					this.form = response.data;
					this.open = true;
					this.title = "修改景区";
				});
			},
			/** 提交按钮 */
			submitForm: function() {
				this.submitLoading = true;
				this.$refs["form"].validate(valid => {
					if (valid) {
						try {
							if (this.form.parkId != undefined) {
								clotaProductEdit(this.form).then(response => {
									this.$modal.msgSuccess("修改成功");
									this.submitLoading = false;
									this.open = false;
									this.getList();
								});
							} else {
								clotaProductAdd(this.form).then(response => {
									this.$modal.msgSuccess("新增成功");
									this.open = false;
									this.submitLoading = false;
									this.getList();
								});
							}
						} catch (err) {
							this.submitLoading = false;
						}
					}
				});
			},
			/** 删除按钮操作 */
			handleDelete(row) {
				const parkIds = row.parkId || this.ids;
				this.$modal.confirm('此操作将要删除数据，是否继续？').then(function() {
					return clotaProductDelete(parkIds);
				}).then(() => {
					this.getList();
					this.$modal.msgSuccess("删除成功");
				}).catch(() => {});
			},
			/** 导出按钮操作 */
			handleExport() {
				clotaProductExport().then(res => {
					console.log('下载信息', res.msg)
					commonDownload({
						fileName: res.msg,
						delete: false
					}).then(res => {
						console.log('下载的内容', res)
					})
				})

				// this.download('clota/product/export', {
				// 	...this.queryParams
				// }, `post_${new Date().getTime()}.xlsx`)
			}
		}
	};
</script>
